<template>
  <div>
    <div class="header fda">
      <div class="logotxt">
        <img src="../assets/xwylogo.png" alt="" />
        <span style="logoname">江苏弦外音智造科技有限公司</span>
      </div>
      <div class="header_right fda">
        <el-menu
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
          background-color="#000"
          text-color="#fff"
        >
          <el-menu-item index="1">
            <router-link to="/">首页</router-link>
          </el-menu-item>
          <el-menu-item index="2">
            <router-link to="/brief"> 公司简介 </router-link>
          </el-menu-item>
          <el-menu-item index="3"
            ><router-link to="/give">服务内容</router-link></el-menu-item
          >
          <el-menu-item index="4">
            <router-link to="/excellentCase">成功案例</router-link>
          </el-menu-item>
          <el-menu-item index="5"
            ><router-link to="/cooperate?id=1"
              >合作机构</router-link
            ></el-menu-item
          >
          <el-menu-item index="6"
            ><router-link to="/news?id=1">新闻资讯</router-link></el-menu-item
          >
          <el-menu-item index="7">
            <router-link to="/contact?id=1">在线合作</router-link>
          </el-menu-item>
          <el-menu-item index="8">
            <router-link to="/legal">法务服务</router-link>
          </el-menu-item>
        </el-menu>
        <div class="put">
          <el-input placeholder="请输入内容" v-model="input4">
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
          </el-input>
        </div>
      </div>
    </div>
    <div class="block">
      <el-carousel height="700px" :autoplay="false">
        <el-carousel-item v-for="item in list" :key="item.id">
          <img
            style="width: 100%; object-fit: cover; height: 100%"
            :src="item.image"
            alt=""
          />
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="hei">
      <img src="../assets/hei.png" alt="" />
      <div class="zi">
        <div class="sanshi fdd">
          公司简介<img
            src="../assets/home.png"
            style="width: 28px; height: 26px; margin-left: 12px"
            alt=""
          />
        </div>
        <div class="ersi" style="margin: 0.13rem 0 0.37rem 0">
          Company Profile
        </div>
        <div class="sanshi" style="margin-bottom: 0.13rem">
          “择一业，终一生”
        </div>
        <div class="ersi">
          江苏弦外音智造科技有限公司成立于2018年4月，植根于科技服务行业，专注于为科技创新助力赋能，
          弦外音专注科技服务，推动科技创新发展。
        </div>
      </div>
    </div>
    <div class="xinwen">
      <div class="biaoti">
        新闻资讯<span class="hui">/ news information</span>
      </div>
      <div class="xinwen_box">
        <div class="box_left" @click="det(news[0].id)">
          <div style="font-size: 0.3rem; font-weight: 600">
            {{ news[0].dated || "" }}
          </div>
          <div
            style="
              font-size: 0.24rem;
              font-weight: 600;
              margin: 0.13rem 0 0.17rem 0;
            "
          >
            {{ news[0].title || "" }}
          </div>
          <div
            style="font-size: 0.22rem; color: #aaaaaa; margin-bottom: 0.25rem"
          >
            {{ news[0].introduction || "" }}
          </div>
          <img src="../assets/lou.png" style="width: 100%" alt="" />
        </div>
        <div class="box_right">
          <div class="son" @click="det(news[1].id)">
            <div class="fd bt">
              <div class="name">{{ news[1].title || "" }}</div>
              <div class="riqi fda">
                {{ news[1].dated || ""
                }}<img src="../assets/left.png" class="jt" />
              </div>
            </div>
            <div class="xq">
              {{ news[1].introduction || "" }}
            </div>
          </div>
          <div class="son" @click="det(news[2].id)">
            <div class="fd bt">
              <div class="name">{{ news[2].title || "" }}</div>
              <div class="riqi fda">
                {{ news[2].dated || ""
                }}<img src="../assets/left.png" class="jt" />
              </div>
            </div>
            <div class="xq">
              {{ news[2].introduction || "" }}
            </div>
          </div>
          <div class="sona" @click="det(news[3].id)">
            <div class="fd bt">
              <div class="name">{{ news[3].title || "" }}</div>
              <div class="riqi fda">
                {{ news[3].dated || ""
                }}<img src="../assets/left.png" class="jt" />
              </div>
            </div>
            <div class="xq">
              {{ news[3].introduction || "" }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="shuju">
      <div class="sjbt">数据<span class="sjhui">/ data</span></div>
      <div class="fd shulist">
        <div>
          <div class="shu">132</div>
          <div class="shuname">高校院所</div>
        </div>
        <div>
          <div class="shu">12</div>
          <div class="shuname">覆盖省市</div>
        </div>
        <div>
          <div class="shu">7012</div>
          <div class="shuname">服务对象</div>
        </div>
        <div>
          <div class="shu">1221</div>
          <div class="shuname">服务项目</div>
        </div>
        <div>
          <div class="shu">28</div>
          <div class="shuname">服务院士</div>
        </div>
        <div>
          <div class="shu">965</div>
          <div class="shuname">国家级项目</div>
        </div>
        <!-- <div>
          <div class="shu">{{ shuju.major || "--" }}</div>
          <div class="shuname">国家重大研发项目</div>
        </div>
        <div>
          <div class="shu">{{ shuju.laboratory || "--" }}</div>
          <div class="shuname">国家级实验室项目</div>
        </div> -->
      </div>
    </div>
    <div class="xinwen">
      <div class="biaoti">
        历史荣誉<span class="hui">/ Historical honors</span>
      </div>
      <div class="xinwen_box">
        <!-- <div class="rongyu" v-for="item in rongyu">
          <img :src="item.image" alt="" />
          <div class="name">{{ item.title || "--" }}</div>
        </div> -->
        <div class="rongyu">
          <img src="@/assets/1.png" alt="" />
          <div class="name">国家级高新技术企业</div>
        </div>
        <div class="rongyu">
          <img src="@/assets/Picture3.png" alt="" />
          <div class="name">AAA级信用企业</div>
        </div>
        <div class="rongyu">
          <img src="@/assets/Picture5.png" alt="" />
          <div class="name">促进就业</div>
        </div>
        <div class="rongyu">
          <img src="@/assets/Picture6.png" alt="" />
          <div class="name">大学生创业</div>
        </div>
        <div class="rongyu">
          <img src="@/assets/Picture4.png" alt="" />
          <div class="name">新锐之星</div>
        </div>
      </div>
    </div>
    <div class="xinwen fuwu">
      <div class="biaoti">我们的服务<span class="hui">/ our service</span></div>
      <div class="typelist fd">
        <div class="list_son" @click="leibie(1)">
          <img src="../assets/neirong.png" v-if="form.type == 1" alt="" />
          <img src="../assets/nr.png" v-else alt="" />
          <p class="name">内容制作服务</p>
          <p class="yinwen">Distributor docking</p>
        </div>
        <div class="list_son" @click="leibie(2)">
          <img src="../assets/shebei.png" v-if="form.type == 2" alt="" />
          <img src="../assets/sb.png" v-else alt="" />
          <p class="name">设备采购服务</p>
          <p class="yinwen">Supplier docking</p>
        </div>
        <div class="list_son" @click="leibie(3)">
          <img src="../assets/woshou.png" v-if="form.type == 3" alt="" />
          <img src="../assets/ws.png" v-else alt="" />
          <p class="name">音视频工作站租赁、销售</p>
          <p class="yinwen">BIO-REAGENT CMO</p>
        </div>
        <div class="list_son" @click="leibie(4)">
          <img src="../assets/woshou.png" v-if="form.type == 4" alt="" />
          <img src="../assets/ws.png" v-else alt="" />
          <p class="name">成果转化</p>
          <p class="yinwen">BIO-REAGENT CMO</p>
        </div>
      </div>
      <div class="fuwu_box">
        <div class="fd">
          <div class="shuru">
            <div class="name">姓名/Name</div>
            <div class="put" style="display: flex; align-items: center">
              <el-input
                v-model="form.username"
                placeholder="请输入姓名"
              ></el-input>
            </div>
          </div>
          <div class="shuru">
            <div class="name">联系电话/Number</div>
            <div class="put" style="display: flex; align-items: center">
              <el-input
                v-model="form.phone"
                placeholder="请输入联系方式"
                maxlength="11"
              ></el-input>
            </div>
          </div>
        </div>
        <div class="shurumax">
          <div class="name">备注/remarks</div>
          <div class="put" style="display: flex">
            <el-input v-model="form.remark" placeholder="请输入备注"></el-input>
          </div>
        </div>
        <div class="btn">
          <el-button
            plain
            style="
              border: 1px solid #fff;
              background-color: rgb(0, 0, 0, 0.16);
              color: #fff;
            "
            @click="tijiao()"
            >提交留言</el-button
          >
        </div>
      </div>

      <img src="../assets/bolang.png" class="bolang" alt="" />
    </div>
    <div class="footer">
      <div class="fd nei">
        <div class="footer_left">
          <img src="../assets/logohui.png" class="logohui" alt="" />
          <p style="margin: 12px auto">©江苏弦外音智造科技有限公司</p>
          <p>京ICP证888888号</p>
        </div>
        <div>
          <p style="font-size: 1.2vw; font-weight: 600">
            <a href="https://www.amap.com/search?query=%E5%8D%97%E4%BA%AC%E5%B8%82%E6%A0%96%E9%9C%9E%E5%8C%BA%E5%85%B4%E6%99%BA%E7%A7%91%E6%8A%80%E5%9B%ADA%E5%BA%A711%E6%A5%BC&city=320000&geoobj=117.784963%7C31.496393%7C120.311263%7C32.627805&zoom=9.65">地址：南京市栖霞区兴智科技园A座11楼</a> 
          </p>
          <p style="margin: 1vw auto">
            微信：19996669669
          </p>
          <p><a href="tel:19996669669">全国24小时服务热线：199 9666 9669</a></p>
          <p style="margin-top: 0.13rem"><a href="https://mail.163.com/">商务合作邮箱：m19996669669@163.com</a> </p>
        </div>
        <div>
          <img class="footer_ma" src="../assets/ma.png" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>
 
<script>
import { banner, datat, config, honor, served, newsList } from "@/api/user";
export default {
  data() {
    return {
      list: [],
      input4: "",
      tabPosition: "left",
      editableTabsValue: "2",
      form: {
        username: "",
        phone: "",
        remark: "",
        type: 1,
      },
      queryForm: {
        type: 1,
      },
      datat: {
        pageNum: 1,
        pageSize: 10,
      },
      shuju: {},
      ry: {
        pageNum: 1,
        pageSize: 4,
      },
      rongyu: {},
      news: {},
    };
  },
  created() {},
  onshow() {},
  mounted() {
    console.log(this.$route.query.id);
    this.editableTabsValue = this.$route.query.id;
    banner(this.queryForm).then((response) => {
      console.log(response);
      this.list = response.rows;
    });
    // 数据
    // datat(this.datat).then((response) => {
    //   console.log(response);
    //   this.shuju = response.rows[0];
    // });
    config().then((response) => {
      console.log(response.data);
      this.content = response.data;
    });
    //新闻资讯
    newsList().then((response) => {
      this.news = response.rows;
      console.log(this.news, "新闻资讯");
      for (var i = 0; i < this.news.length; i++) {
        this.news[i].dated = this.timestampToTime(this.news[i].dated);
      }
    });
    // 历史荣誉
    // honor(this.ry).then((response) => {
    //   console.log(response.rows);
    //   this.rongyu = response.rows;
    // });
  },
  methods: {
    det(e) {
      this.$router.push("/xq?id=" + e);
    },
    timestampToTime(cjsj) {
      var date = new Date(cjsj * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      // var Y = date.getFullYear() + "-";
      var M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      var D = date.getDate() + " ";
      // var h = date.getHours() + ":";
      // var m = date.getMinutes() + ":";
      // var s = date.getSeconds();
      return M + D;
    },
    leibie(e) {
      console.log(e, "e");
      this.form.type = e;
    },
    tijiao() {
      if (!this.form.username) {
        this.$message({
          message: "请填写姓名",
          type: "warning",
        });
        return;
      }
      if (!this.form.phone) {
        this.$message({
          message: "请填写联系方式",
          type: "warning",
        });
        return;
      }
      if (!this.form.remark) {
        this.$message({
          message: "请填写备注",
          type: "warning",
        });
        return;
      }
      served(this.form).then((response) => {
        console.log(response);
        // this.rongyu = response.rows;
        this.$message({
          message: "留言成功~",
          type: "success",
        });
      });
    },
    clickChange(lab) {
      console.log(lab, "123");
      this.tabPosition = lab;
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    // 返回上一层
    go() {
      this.$router.go(-1);
    },
    // // 查看用户
    handleCha() {
      this.$router.push({
        name: "/school",
        // query: { classId: row.id, schoolId: row.schoolId, name: row.name },
      });
    },
  },
};
</script>
 
<style  lang="less" scoped>
/deep/.el-menu-item {
  font-size: 0.14rem;
  padding: 0 0.2rem;
  cursor: pointer;
}
/deep/.el-submenu__title {
  font-size: 0.14rem;
  color: #303133;
  padding: 0 0.2rem;
  cursor: pointer;
  transition: border-color 0.3s, background-color 0.3s, color 0.3s;
  box-sizing: border-box;
}
/deep/.el-menu--horizontal > .el-menu-item {
  float: left;
  height: 0.6rem;
  line-height: 0.6rem;
  margin: 0;
  border-bottom: 0.02rem solid transparent;
  color: #909399;
}
/deep/.el-menu--horizontal > .el-submenu .el-submenu__title {
  height: 0.6rem;
  line-height: 0.6rem;
  border-bottom: 0.02rem solid transparent;
  color: #909399;
}
.shuru {
  margin-bottom: 0.24rem;
  width: 48%;
  .name {
    font-size: 0.16rem;
    font-weight: 600;
    margin-bottom: 0.1rem;
  }
}
.shurumax {
  margin-bottom: 0.84rem;
  .name {
    font-size: 0.16rem;
    font-weight: 600;
    margin-bottom: 0.2rem;
  }
}
.fuwu {
  background-color: #f6f6f6;
  position: relative;
  .typelist {
    width: 70%;
    margin: 0 auto;
    margin-top: 0.67rem;
    margin-bottom: 0.57rem;
    .list_son {
      cursor: pointer;
      text-align: center;
      color: #303030;
      font-size: 0.16rem;
      .name {
        margin: 0.11rem 0 0.08rem 0;
        font-size: 0.2rem;
      }
      img {
        width: 1.66rem;
      }
    }
  }
  .fuwu_box {
    width: 60%;
    margin: 0 auto;
    z-index: 1;
    position: relative;
    .btn {
      text-align: center;
    }
  }
  .bolang {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 0;
  }
}
.shuju {
  background-color: #2a2a2a;
  padding: 0.8rem 0.68rem;
  box-sizing: border-box;
  width: 100%;
  .sjbt {
    width: 100%;
    text-align: center;
    font-size: 0.32rem;
    font-weight: 600;
    margin-bottom: 0.32rem;
    color: #fff;
    .sjhui {
      color: #aaaaaa;
      margin-left: 0.24rem;
    }
  }
  .shulist {
    width: 90%;
    margin: 0 auto;
    .shu {
      font-size: 0.4rem;
      color: #007aff;
      text-align: center;
    }
    .shuname {
      font-size: 0.28rem;
      color: #fff;
      margin-top: 0.24rem;
      text-align: center;
    }
  }
}
.xinwen {
  padding: 0.8rem 0;
  box-sizing: border-box;
  width: 100%;
  margin: 0 auto;
  .biaoti {
    width: 100%;
    text-align: center;
    font-size: 0.32rem;
    font-weight: 600;
    margin-bottom: 0.32rem;
    .hui {
      color: #aaaaaa;
      margin-left: 0.24rem;
    }
  }
  .xinwen_box {
    width: 80%;
    height: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    .box_left {
      width: 48%;
      background-color: #f6f6f6;
      padding: 0.24rem;
      box-sizing: border-box;
    }
    .box_right {
      width: 48%;
      .son {
        padding-bottom: 0.25rem;
        box-sizing: border-box;
        border-bottom: 0.01rem solid #f6f6f6;
        margin-bottom: 0.25rem;
        .bt {
          font-weight: 600;
          .name {
            font-size: 0.24rem;
          }
          .riqi {
            font-size: 0.22rem;

            .jt {
              width: 0.36rem;
              margin-left: 0.35rem;
            }
          }
        }
        .xq {
          font-size: 0.22rem;
          margin-top: 0.25rem;
          color: #aaaaaa;
        }
      }
      .sona {
        .bt {
          font-weight: 600;
          .name {
            font-size: 0.24rem;
          }
          .riqi {
            font-size: 0.22rem;

            .jt {
              width: 0.36rem;
              margin-left: 0.35rem;
            }
          }
        }
        .xq {
          font-size: 0.22rem;
          margin-top: 0.25rem;
          color: #aaaaaa;
        }
      }
    }
    .rongyu {
      position: relative;
      margin-left: 0.08rem;
      max-width: 5.17rem;
      min-width: 2.5rem;
      img {
        width: 100%;
        object-fit: cover;
        height: 100%;
      }
      .name {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: #484848;
        padding: 0.12rem 0.32rem;
        box-sizing: border-box;
        color: #fff;
        font-size: 0.28rem;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
  }
}
.hei {
  width: 100%;
  position: relative;
  img {
    width: 100%;
  }
  .zi {
    position: absolute;
    left: 0.8rem;
    color: #fff;
    top: 0.48rem;
    .sanshi {
      font-size: 0.3rem;
    }
    .ersi {
      font-size: 0.24rem;
    }
  }
}
.el-menu.el-menu--horizontal {
  border: none !important;
}
/deep/.el-input__inner {
  border-radius: 1rem !important;
}
.header {
  width: 100%;
  padding: 0.19rem 0.32rem;
  box-sizing: border-box;
  background-color: #000000;
  color: #fff;
  .logotxt {
    display: flex;
    align-items: center;
    font-size: 0.26rem;
    font-weight: 600;
    img {
      width: 0.44rem;
      margin-right: 1vw;
    }
  }
  .header_right {
    .put {
      width: 1.8rem;
      display: flex;
    }
  }
}

.footer {
  width: 100%;
  background-color: #f6f6f6;
  padding: 0.54rem 0;
  box-sizing: border-box;
  .nei {
    width: 70%;
    margin: 0 auto;
    text-align: left;
    color: #484848;
    font-size: 0.15rem;
    .footer_ma {
      width: 10vw;
      max-width: 1.2rem;
    }
    .logohui {
      width: 0.56rem;
    }
  }
}
</style>